@width:200px;  //总体宽度
@background:rgba(252,145,83,1);  //背景颜色
@fontcolor:#fff;  //字体颜色
@fontsize:14px;  //字体大小
#friend{
  position: fixed;
  right:0;
  top:0;
  z-index: 10;
  width:@width;
  height:100%;
  color:@fontcolor;
  font-size:@fontsize;
  background: @background;
  border-left:2px solid #fff;
    .header{
      height:40px;
      line-height: 40px;
      text-align: center;
      border-bottom: 1px solid #fff;
        .close{
          position: absolute;
          top:0;
          left:0;
          font-size:25px;
          width: 40px;
        }
    }
    .add{
      position: relative;
      padding:10px 10px;
        .button{
          text-indent: 24px;
        }
        .icon{
          position: absolute;
          top:22px;
          left:45px;
          width:25px;
          height:25px;
        }
    }
    li{
      position: relative;
      height:45px;
      line-height: 45px;
      padding:0 10px;
      border-bottom: 1px dashed #fff;
      &:last-child{
        border-bottom: none;
      }
      .header{
        display: block;
        float: left;
        width: 35px;
        height:35px;
        border-radius: 17.5px;
        border:1px solid #fff;
        margin:5px 5px 0 0;
        object-fit: cover;
        box-sizing: border-box;
      }
      .name{
        float: left;
        width: 140px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .award-number{
        position: absolute;
        display: none;
        top:0;
        right:50px;
        color:red;
        font-weight: bolder;
        animation-duration: 3s;
      }
      .bz{
        position: absolute;
        right:10px;
        top:12px;
        display: block;
        width: 35px;
        animation-duration: 1.5s;
      }
    }
}
